<template>
	<view class="container">
		<uni-nav-bar rightIcon="checkmarkempty" :title="detail_titles[funcode]" @clickRight="formSubmit" />

		<uni-forms ref="form" :rules="rules" :model="noteItem">
			<uni-forms-item class="formItem" name="title" required>
				<uni-easyinput class="titleInput" v-model="noteItem.title" placeholder="输入备忘录标题..." />
			</uni-forms-item>
			<uni-forms-item class="formItem" name="content" required>
				<uni-easyinput autoHeight type="textarea" v-model="noteItem.content" placeholder="输入备忘录内容..." />
			</uni-forms-item>
			<view v-if="funcode==1" class="optBox">
				<image class="status-image" :src="imgPath+img_status[noteItem.status]" mode=""></image>
				<uni-data-select class="selecter" v-model="value" :localdata="range" @change="change"></uni-data-select>
			</view>
			<view class="footer" v-if="funcode==1" >
				<uni-icons type="trash" size="30" @click="delNote" ></uni-icons>
			</view>
		</uni-forms>

	</view>
</template>

<script>

	export default {
		data() {
			return {
				detail_titles: ['新建备忘录', '修改备忘录'],
				funcode: 0,
				// noteIndex: -1,
				noteId: -1,
				imgPath: "/static/images/",
				img_status: ["kaishi.png", "jinxing.png", "jiesu.png"],
				value: 0,
				range: [{
						value: 0,
						text: "未开始"
					},
					{
						value: 1,
						text: "进行中"
					},
					{
						value: 2,
						text: "已结束"
					},
				],
				noteItem: {
					id:'',   
					title: '',
					time: null,
					content: '',
					status: 0 
                    
				},
				rules: {
					title: {
						rules: [{
								required: true,
								errorMessage: "请输入备忘录标题！"
							},
							{
								maxLength: 20,
								errorMessage: "标题超过20个字符长！"
							}
						],
						validateTrigger: 'formSubmit'
					},
					content: {
						rules: [{
								required: true,
								errorMessage: "请输入备忘录内容！"
							},
							{
								maxLength: 200,
								errorMessage: "内容不能超过200字！"
							}
						]
					}
				}
			};
		},
		onLoad(option) {
			this.funcode = option.funcode;
						if (!(this.funcode in [0, 1])) {
							this.funcode = 0
						}
						if (this.funcode == 1) {
							this.noteId = option.id    
							this.getTheItemFromCloud()
						}

		},
		methods: {
			delNote(){
				uni.showModal({
						content: "确定删除？",
						success: (res) => {
							if (res.confirm) {
								this.setTheStorage('delete', "删除成功！")
							}
						}
					})
			},
			change(e) {
				console.log("e:", e);
				this.noteItem.status = e
			},
			getTheItemFromCloud() {
				uniCloud.callFunction({
						name: "CloudGetData",
						data: {
							type:'one',        
							id: this.noteId    

						}
					}).then(res => {
						console.log(res)
						let notes = res.result.data;
						this.noteItem.id = notes[0]._id
						this.noteItem.title = notes[0].title
						this.noteItem.content = notes[0].content
						this.noteItem.status = notes[0].status
						this.value = this.noteItem.status 
					})
			},
			setTheStorage(theType, hintMessage) {
					try {
						uniCloud.callFunction({
							name: "CloudUpdateData",
							data: {
								type: theType,
								title: this.noteItem.title,
								content: this.noteItem.content,
								status: this.noteItem.status,
								id: this.noteItem.id
							}
						}).then(res => {
							console.log(res)
						})
				    } catch (e) {
						console.log(e)
					 }
					 uni.showToast({
						icon: "success",
						title: hintMessage,
						duration: 1500
					 })
					 setTimeout(() => {
						uni.reLaunch({
						    url: "/pages/list/list"
						})
					 }, 1500)

			},

			formSubmit() {

			    this.$refs.form.validate().then(() => {
					var hintMessage;
				    var theType;
			      	this.noteItem.time = Date.now()
					if (this.funcode == 0) {
						hintMessage = "增加成功！";
						theType = 'add';
					} else {
						hintMessage = "更新成功！";
						theType = 'update';
					}
					this.setTheStorage(theType, hintMessage)
				}).catch((err) => {
					console.log(err)
				})

			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		font-size: 30rpx;
		line-height: 32rpx;
	}

	.formItem {
		margin: 10rpx 20rpx;
	}

	.optBox {
		display: flex;
		padding: 20rpx 0rpx 20rpx 0rpx;
	}

	.status-image {
		width: 40px;
		height: 40px;
	}

	.selecter {
		flex: 1;
		padding: 0rpx 0rpx 0rpx 20rpx;
	}

	.footer {
		width: 100%;
		text-align: center;
		position: fixed;
		bottom: 50rpx;
	}
</style>
